// 这个配置文件就是个 js 文件，通过 Node 模块操作，向外暴露了一个配置对象
const path = require('path')

const webpack = require('webpack')

// 导入在内存中生成 HTML 页面的插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: path.join(__dirname, './src/main.js'), //入口
	output: {
		path: path.join(__dirname, './dist'), //出口
		filename: 'bundle.js' //指定输出文件的名称
	},
	plugins: [
		new htmlWebpackPlugin({
			template: path.join(__dirname, './src/index.html'), // 指定模板页面
			filename: 'index.html'
		})
	],
	module: { // 配置所有第三方模块加载器
		rules: [ // 所有第三方匹配规则
			{ // 配置处理.css文件的第三方loader规则
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{ // 配置处理图片文件的第三方loader规则 
				test: /\.(jpg|png|gif|bmp|jpeg)$/,
				use: ['url-loader']
			},
			// limit 给定的值是图片的大小，引用的图片≥limit则不会转为base64格式的字符串，小于给定值，则会转为base64
			// name=[hash:8]-[name].[ext]
			{ // 配置字体文件loader
				test: /\.(ttf|eot|svg|woff|woff2)$/,
				use: ['url-loader']
			},
			{	// 配置babel 转化 ES6高级语法
				test: /\.js$/,
				use: 'babel-loader',
				exclude: /node_modules/
			},
			{	// 配置vue 
				test: /\.vue$/,
				use: 'vue-loader'
			}
		]
	}
}
